<template>
    <div class="aboutBox flex justify-center align-center flex-direction">
        <Menus :webconfig="about.webinfo" :data="about.menusnav"></Menus>
        <div class="aboutCoreBox flex justify-between align-start">
            <div class="contentBox flex justify-end align-start flex-direction">
                <div class="contentCoreBox" v-html="about.about.dynamic_contents"></div>
            </div>
            <div class="coverBox flex justify-center align-end">
                <a :href="Ads[4].link" target="_blank"><img src="../static/adsimgs/cloudimg/180x460.png" :alt="Ads[4].title"></a>
            </div>
        </div>
        <Copy :webconfig="about.webinfo" :frendlyData="about.friends" :menuDatas="about.menus" :bussinessData="about.bussiness" :questionsData="about.questions.data"></Copy>
    </div>
</template>
<script>
import {extendsMenus,extendsParams,extendsEncrypte} from '~/assets/inc/common.js';
import {apis} from '~/assets/inc/apis.js';
import { Ads } from '../assets/inc/tencentAds';
export default{
    async asyncData(context){
        extendsEncrypte({},context.$axios);
        let {data} = await context.$axios.get(apis.aboutAPI,extendsParams({}));
        data.message.menusnav = extendsMenus([...data.message.menus]);
        return {about:data.message};
    },
    head: {
        title: '关于-欽天監"文化自信、民族复兴"',
    },
    watch:{
        //监听store的变化
        '$store.state.locale': function (el,val) {
            //你需要执行的代码
            this.getDataHandle(el);
        }
    },
    data(){
        return{
            about:'',
            Ads:Ads
        }
    },
    methods:{
        async getDataHandle(){
            extendsEncrypte({},axios);
            let {data} = await axios.get(apis.aboutAPI,extendsParams({}));
            data.message.menusnav = extendsMenus([...data.message.menus]);
            this.about = data.message;
        }
    },
    mounted(){
        this.$store.commit('setLoading',false);
    },
    beforeDestroy(){
        this.$store.commit('setLoading',true);
    }
}
</script>
<style lang="scss" scoped>
    .aboutBox{
        .aboutCoreBox{
            width:1200px;
            padding: 150px 0 50px 0;
            .coverBox{
                flex:0 0 auto;
                width:180px;
                img{
                    width:180px;
                    height: auto;
                    border-radius: 20px;
                }
            }
            .contentBox{
                flex:1 1 auto;
                padding-right: 50px;
                img{
                    width:200px;
                    height:auto;
                    margin-bottom: 30px;
                }
                .contentCoreBox{
                    padding:40px;
                    background: rgba(240, 240, 240, 0.5);
                    backdrop-filter: blur(10px);
                    border-radius: 20px;
                    color:var(--black);
                    img{
                        max-width: 100% !important;
                        border-radius: 20px !important;
                    }
                }
            }
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .aboutBox{
            .aboutCoreBox{
                width:100%;
                padding: 7rem 0 0 0;
                flex-flow: column;
                .coverBox{
                    flex:1 1 auto;
                    width:100%;
                    display: none;
                    img{
                        width:100%;
                        height: auto;
                        border-radius: 0;
                    }
                }
                .contentBox{
                    flex:1 1 auto;
                    padding-right: 0;
                    img{
                        width:100% !important;
                        height:auto;
                        margin-bottom: 2rem;
                    }
                    .contentCoreBox{
                        padding:2rem;
                        background: rgba(240, 240, 240, 0.5);
                        backdrop-filter: blur(10rem);
                        border-radius: 0;
                        color:var(--black);
                        font-size: 1.4rem;
                        img{
                            max-width: 100% !important;
                            border-radius: 2rem !important;
                        }
                    }
                }
            }
        }
    }
</style>